<form class="layui-form x-center" action="" style="width:100%">
  <div class="layui-form-pane" style="margin-top: 5px;">
    <div class="layui-form-item">
      <label class="layui-form-label">日期范围</label>
      <div class="layui-input-inline">
        <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
      </div>
      <div class="layui-input-inline">
        <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
      </div>
      <div class="layui-input-inline">
        <input type="text" name="username" placeholder="请输入登录名" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-input-inline" style="width:80px">
        <button class="layui-btn" lay-submit="" lay-filter="sreach">
          <i class="layui-icon">&#xe615;</i>
        </button>
      </div>
    </div>
  </div>
</form>
<span>
    <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="AdminUserDelAll()">
        <i class="layui-icon">&#xe640;</i>批量删除</button>
    <button class="layui-btn layui-btn-sm" onclick="AdminUserAdd()">
        <i class="layui-icon">&#xe608;</i>添加</button>
    <button class="layui-btn layui-btn-sm" onclick="AdminUserEdit()">
        <i class="layui-icon">&#xe608;</i>编辑</button>
</span>
<div id="AdminUserDt" lay-filter="AdminUserDt"></div>
<script>
  table.render({
    elem: '#AdminUserDt',
    height: 'full-300',
    skin: 'row',
    even: true,
    size: 'sm',
    url: '__APP__/Admin/User/view',
    where: {sort: 'id', order: 'desc'},
    limit: 5,
    limits: [1, 2, 3, 5, 10, 20],
    method: 'post',
    response: {
      statusName: 'status',
      statusCode: 1,
      msgName: 'msg',
      countName: 'total',
      dataName: 'rows'
    },
    page: {
      layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
      //curr:1,
      first: false,
      last: false,
      //curr: location.hash.replace('#!fenye=', ''),
      hash: 'fenye'
    },
    done: function (res, curr, count) {
      //如果是异步请求数据方式，res即为你接口返回的信息。
      //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
      //console.log(res);
      //得到当前页码
      //console.log(curr);
      //得到数据总量
      //console.log(count);
    },
    cols: [
      [
        {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', checkbox: true},
        {field: 'account', title: '用户名', width: 100, fixed: 'left'},
        {field: 'nickname', title: '名称', width: 100, sort: true},
        {field: 'email', title: '电子邮件', width: 150},
        {field: 'last_login_ip', title: '登录IP', minWidth: 150},
        {
          field: 'roles',
          title: '所属角色',
          minWidth: 100,
          sort: true,
          templet: function (data) {
            //console.log(data);
            if (data.roles.length != 0) {
              return '<span style="color:black;">' + data.roles[0].title + '</span>'
            } else {
              return '空';
            }
          }
        },
        {field: 'remark', title: '备注', minWidth: 100},
        {field: 'status', title: '状态', width: 100, sort: true},
        /*{ fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo' } */ //这里的toolbar值是模板元素的选择器
      ]
    ]
  });
  //监听工具条
  table.on('tool(AdminUserDt)', function (obj) {
    var data = obj.data; //获得当前行数据
    //console.log(data);
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的DOM对象

    if (layEvent === 'detail') { //查看
      alert("查看");
      //do somehing
    } else if (layEvent === 'del') { //删除
      layer.confirm('真的删除行么', function (index) {
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if (layEvent === 'edit') { //编辑
      //do something
      //x_admin_show("编辑", "__URL__/edit", 500, 350);
      //同步更新缓存对应的值
      obj.update({
        username: '123',
        title: 'xxx'
      });
    }
  });
  //以上模块根据需要引入

  laypage.render({
    cont: 'page',
    pages: 100,
    first: 1,
    last: 100,
    prev: '<em><</em>',
    next: '<em>></em>'
  });

  var start = {
    min: '2009-01-01',
    max: '2099-06-16 23:59:59',
    istoday: false,
    choose: function (datas) {
      end.min = datas; //开始日选好后，重置结束日的最小日期
      end.start = datas //将结束日的初始值设定为开始日
    }
  };

  var end = {
    min: '2009-01-01',
    max: '2099-06-16 23:59:59',
    istoday: true,
    choose: function (datas) {
      start.max = datas; //结束日选好后，重置开始日的最大日期
    }
  };

  document.getElementById('LAY_demorange_s').onclick = function () {
    start.elem = this;
    laydate.render(start);
  }
  document.getElementById('LAY_demorange_e').onclick = function () {
    end.elem = this
    laydate.render(end);
  }

  //批量删除提交
  function AdminUserDelAll() {
    var rows = table.checkStatus('AdminUserDt').data;
    if (rows.length > 0) {
      layer.confirm('您是否要删除当前选中的项目？', function (index) {
        //发异步删除数据
        var ids = new Array();
        for (var i = 0; i < rows.length; i++) {
          ids.push(rows[i].id);
        }
        $.ajax({
          url: '{:U("User/delete")}',
          data: {ids: ids.join(',')},
          dataType: 'json',
          success: function (r) {
            if (r.status) {
              table.reload('AdminUserDt');
            }
            layer.msg(r.info);
          }
        });
      });
    } else {
      layer.msg('请勾选要删除的记录！');
    }
  }

  /*添加*/
  function AdminUserAdd() {
    $.post('__URL__/add/', {}, function (str) {
      layer.open({
        type: 1,
        anim: 1,
        offset: 't',
        area: ['800px', '500px'],
        fix: false, //不固定
        maxmin: true,
        shadeClose: true,
        title: "编辑",
        content: str
      });
    });
  }

  /*添加*/
  function AdminUserEdit() {
    var checkStatus = table.checkStatus('AdminUserDt');
    // console.log(checkStatus.data) //获取选中行的数据
    if (checkStatus.data.length > 1) {
      layer.msg('不能同时编辑多条记录，请选择一条！');
    } else if (checkStatus.data.length == 0) {
      layer.msg('请勾选要编辑的记录！');
    } else {
      $.post('__URL__/edit/', {}, function (str) {
        layer.open({
          type: 1,
          anim: 1,
          offset: 't',
          area: ['800px', '500px'],
          fix: false, //不固定
          maxmin: true,
          shadeClose: true,
          title: "编辑",
          content: str, //注意，如果str是object，那么需要字符拼接。
          success: function (layero, index) {
            var o = checkStatus.data[0];
            o.layerindex = index;
            if (o.roles.length != 0 && o.roles != '') {
              o.roleid = o.roles[0].id;
            }
            fillForm('#AdminUserEdit', o);
          }
        });
      });
    }
  }

  /*删除*/
  function admin_del(obj, id) {
    layer.confirm('确认要删除吗？', function (index) {
      //发异步删除数据
      $(obj).parents("tr").remove();
      layer.msg('已删除!', {icon: 1, time: 1000});
    });
  }

  /*停用*/
  function admin_stop(obj, id) {
    layer.confirm('确认要停用吗？', function (index) {
      //发异步把用户状态进行更改
      $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="admin_start(this,id)" href="javascript:;" title="启用"><i class="layui-icon">&#xe62f;</i></a>');
      $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-disabled layui-btn-mini">已停用</span>');
      $(obj).remove();
      layer.msg('已停用!', {icon: 5, time: 1000});
    });
  }

  /*启用*/
  function admin_start(obj, id) {
    layer.confirm('确认要启用吗？', function (index) {
      //发异步把用户状态进行更改
      $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="admin_stop(this,id)" href="javascript:;" title="停用"><i class="layui-icon">&#xe601;</i></a>');
      $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>');
      $(obj).remove();
      layer.msg('已启用!', {icon: 6, time: 1000});
    });
  }
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
  <!-- 这里同样支持 laytpl 语法，如： -->
  {{# if(d.auth > 2){ }}
  <a class="layui-btn layui-btn-xs" lay-event="check">审核</a> {{# } }}
</script>